<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>积分详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
html,body{
	margin: 0 0 0 0;
	padding: 0;
}
.day{
	  background-color: #f0f0f0;
    border-radius: 0 15px 15px 0;
    width: 110px;
    margin: 10px 0 0 0;
    padding: 0 0 0 10px;
    font-size: 14px;
    font-weight: 200;
    line-height: 30px;
}
.data{
	border-bottom: solid 1px #e0e0e0;
	margin: 0 10px 0 10px;
}
.data div{
	display: inline-block;
	/* width: 30%; */
	line-height: 50px;
}
.data .time{
	text-align: left;
	padding-left: 5px;
  font-size: 14px;
  font-weight: 200;
}
.data .storeName{
	text-align: right;
  font-size: 14px;
  font-weight: 400;
}
.data .tradeValue{
	text-align: right;
  font-size: 14px;
  font-weight: 200;
  float: right;
}
.data .reduce{
  color: #666666;
}
.data .add{
  color: #f6905f;
}
</style>
</head>
<body>
	<div id="info">
	</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var dayArr = Array();
var start = 0;
function loadData(){
	var baseInfoUrl = '${pageContext.request.contextPath}/open/me/detailList?tradeType=3&limit=10&startNum='+start;
	$.ajax({
		url:baseInfoUrl,
		type:"GET",
		timeout: 2000,
		dataType:"jsonp",
		success:function (result) {
			if(result.status == 200){
				if(result.data){					
					for(j = 0; j < result.data.length; j++) {
						start++;
						if(dayArr.indexOf(result.data[j].day) < 0){
							dayArr.push(result.data[j].day)
							$('#info').append('<div class="day">'+result.data[j].day+'</div>');
						}
						var itemHtml = '<div class="data">';
							itemHtml += ' <div class="time">'+result.data[j].time+'</div>';
							itemHtml += ' <div class="storeName">'+result.data[j].storeName+'</div>';
							itemHtml += ' <div class="tradeValue '+result.data[j].type+'">'+(result.data[j].type == 'add'? '+':'-')+Number(result.data[j].tradeValue)/100+'</div>';
							itemHtml += '</div>';
						$('#info').append(itemHtml);
					}
				}else{
					$('#info').append('<div style="width:100%;height:100%;text-align: center;padding-top:100px;color: #d2d2d2;"><span>暂无内容</span></div>');
				}
				
			}else{
				//alert(result.msg);
			}
		},
		error:function(result){
			//alert("服务器错误");
		}
	})
}
$(function(){
	loadData();
})
</script>
</body>
</html>